<template>
  <layout>
    <div class="container">
      <div class="manageBox">
        <div v-for="(item,index) in projects.data" :key="index" class="project">
          <!-- <div class="triangle">{{item.triangle}}</div> -->
          <div @click="navigator(projects.parentPath,item)">
            <div class="content">
              <h1>{{ item.meta.title }}</h1>
              <p>当前服务已开放，相关数据内容点击后可进行查看</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </layout>
</template>

<script>
import Layout from '@/components/Layout'

export default {
  components: {
    Layout
  },
  data() {
    return {

    }
  },
  methods: {

  }
}
</script>
<style scoped lang="scss">
.container {
    .pannelBox {
        display: flex;
        .pannel {
            flex: 0 0 24%;
            margin: 20px 1.333% 20px 0;
            overflow: hidden;
            border-radius: 5px;
            box-shadow: 0 0 15px #ccc;
            &:last-child{
                margin-right: 0;
            }
            .head {
                padding: 15px;
                background: #1fc37e;
                color: #fff;
                .college {
                    padding: 3px 10px 2px;
                    background: #fff;
                    color: #1fc37e;
                    border-radius: 10px;
                    font-size: 12px;
                }
                .text {
                    font-size: 12px;
                }
            }
            .content {
                overflow: auto;
                padding: 20px 0 0;
                background: #fff;
                li {
                    float: left;
                    padding-bottom: 20px;
                    width: 50%;
                    text-align: center;
                    color: #001737;
                    // font-weight: bold;
                    p {
                        display: block;
                    }
                    .num {
                        padding-right: 5px;
                        color: #1fc37e;
                        font-weight: bold;
                        font-size: 20px;
                    }
                }
            }
        }
    }
    .manageBox {
        display: flex;
        flex-wrap: wrap;
        padding-top: 10px;
        .project {
            flex: 0 0 24%;
            display: flex;
            justify-content: center;
            overflow: hidden;
            position: relative;
            margin: 20px 1.333% 0 0;
            padding: 50px 0;
            border-radius: 5px;
            box-shadow: 0 0 15px #ccc;
            background: #fff;
            &:first-child {
                .triangle {
                    background: #f62053;
                }
            }
            &:nth-child(4n) {
                margin-right: 0;
            }
            .triangle {
                position: absolute;
                left: -30px;
                top: -8px;
                transform: rotate(-30deg) scale(0.8);
                padding: 10px 30px 0;
                background: #23c37f;
                color: #fff;
                font-weight: bold;
            }
            .content {
                padding-left: 60px;
                width: 200px;
                color: #a5abb0;
                h1 {
                    color: #323c47;
                    font-size: 18px;
                }
            }
        }
    }
}
</style>
